:root {

/* Color Variables */
--primary: #b62420;
--secondary: #2C3E50;
--heading-color:#333333;
--body-color:#555555;
--black: #000000;
--ligh-black:#555555;
--white-color:#ffffff;
--border-color:#262e36;

/* Button Variables */
--btn-padding-y: 12px;
--btn-padding-x: 30px;
--btn-font-size: 1rem;
--btn-border-radius: 0.375rem;
--btn-bg: var(--primary);
--btn-color: var(--white-color);
--btn-border-color: var(--primary);
--btn-hover-bg:var(--secondary);
--btn-hover-color: var(--white-color);
--btn-hover-border-color: var(--primary);
    
/* Heading Font Sizes with responsive */
--fs-h1: clamp(2rem, 5vw, 3rem);
--fs-h2: clamp(1.75rem, 4vw, 2rem);
--fs-h3: clamp(1.5rem, 3.5vw, 1.8rem);
--fs-h4: clamp(1.25rem, 3vw, 1.5rem);
--fs-h5: clamp(1.1rem, 2.5vw, 1.2rem);
--fs-h6: clamp(1rem, 2vw, 1rem);
--fs-body: clamp(0.95rem, 1.8vw, 1rem);

/* Body Style */
--body-font-family:'Mulish', sans-serif;
--heading-font-family:'Mulish', sans-serif;
--body-font-size: 1rem;
--body-font-weight: 500;
--body-line-height: 1.5;
--body-color: var(--black);
--body-bg: var(--white-color);

}

body {font-family: var(--body-font-family); font-size: var(--body-font-size); font-weight: var(--body-font-weight); line-height: var(--body-line-height); color: var(--body-color); background-color: var(--body-bg); overflow-x: hidden;}

h1,h2,h3,h4,h5,h6 {font-family: var(--heading-font-family); margin: 0px; line-height: 1.2; color:var(--heading-color); font-weight: 600;}

.btn { padding: var(--btn-padding-y) var(--btn-padding-x); background-color: var(--btn-bg);
  color: var(--btn-color); font-size: var(--btn-font-size); font-weight: 600; border: 1px solid var(--btn-border-color); border-radius: var(--btn-border-radius); cursor: pointer; transition: all 0.3s ease;}
.btn:hover {background: none; border-color: var(--btn-border-color);}

a, a:hover, a:focus {text-decoration:none; transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; color: var(--heading-color);}
.card {border-radius: var(--btn-border-radius);}

h1 {font-size:var(--fs-h1);}
h2 {font-size:var(--fs-h2);}
h3 {font-size:var(--fs-h3);}
h4 {font-size:var(--fs-h4);}
h5 {font-size:var(--fs-h5);}
h6 {font-size:var(--fs-h6);}


/* Margin CSS Start */
.mt-100 {margin-top: 100px;}
.mb-100 {margin-bottom: 100px;}

/* Form Elements Section CSS Start */
.form-control {min-height: 50px; background: none; border-radius:0.375rem; resize: none;}
.form-select {min-height: 50px; border-radius:0.375rem;}

/* Header Section CSS Start */
header {border-bottom: 1px solid var(--border-color); padding: 10px 0px;}
header .logo img {width: 30%;}
header .profile--link .user {width: 50px; height: 50px; border-radius: 100%; background: var(--secondary); display: flex; align-items: center; justify-content: center;}
header .profile--link img {width: 50px; height:50px; border-radius:100%; object-fit:cover;}
.profile--link .dropdown-menu li .dropdown-item {padding:16px;}
/* Login Page CSS Start */
.login-sec {height: 100vh;}
.login-sec .left img {height: 100vh; object-fit: cover;}
.login-sec .right .innerbox {padding: 0px 100px; display: flex; flex-direction: column; gap: 30px;}
.login-sec .right .innerbox .ttl {margin-bottom: 20px;}
.login-sec .right .innerbox p {opacity: 0.5;}
.login-sec .right .innerbox .sign-up-link {text-align: center;}
.login-sec .right .innerbox .sign-up-link p {opacity: 1;}
.sign-up-link a {color: var(--primary);}
.dropdown-menu {z-index: 99999;}

/* Course Listing Page CSS Start */
.video-list {min-height: calc(100vh - 100px);}
.course-box figure {position: relative; display: flex; align-items: center; justify-content: center;    overflow: hidden; border-radius: var(--btn-border-radius);}
.course-box figure img {border-radius: var(--btn-border-radius); transition: transform 0.4s ease;}
.course-box figure::before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.4); opacity: 0; transition: opacity 0.4s ease; border-radius: var(--btn-border-radius); z-index: 1;}
.course-box figure span {width: 50px; height: 50px; background: var(--primary); border-radius: 100%;   display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%) scale(0.8); opacity: 0; transition: all 0.4s ease; z-index: 2; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);}
.course-box figure span img {width: 60%; height: auto;}
.course-box:hover figure::before {opacity: 1;}
.course-box:hover figure span {opacity: 1; transform: translate(-50%, -50%) scale(1);}
.course-box:hover figure img {transform: scale(1.05);}
.back-sec {padding:10px 0px; background: #f6f6f6;}

/* Course Detail Page CSS Start */
.video-box {width: 100%; padding: 0; margin: 0;}
.video-full {width: 100%; height: auto; display: block; border-radius: 0;}
.course--detail-box .content {padding: 0px 20px;}
.sticky-sidebar {position: sticky; top: 60px; width:100%; height: calc(100vh - 60px); overflow-y: auto; background:var(--white-color); border-left: 1px solid #eee; box-shadow: -2px 0 10px rgba(0,0,0,0.05);}
.course-page .right .heading {background: var(--secondary); padding: 16px 16px;}
.course-page .right .heading h6 {color: var(--white-color);}
.accordion-item:first-of-type{border-radius: 0px;}
.accordion-button:not(.collapsed) {background: var(--white-color); box-shadow: none;}
.accordion-header {border-bottom: 1px solid var(--border-color);}
.accordion-header div {color: var(--heading-color); font-size: 20px; font-weight: 600;}
.accordion-header small {font-size: 14px;}
.accordion-body {background:#f6f6f6; display: flex; flex-direction: column; gap: 10px;}
.accordion-body small {opacity: 0.7;}
.accordion-body .sublisting {border-bottom:1px solid #e6e6e6; padding-bottom: 10px; margin-bottom: 10px;}
.accordion-body .sublisting:last-child {border-bottom:none; padding-bottom: 0px; margin-bottom: 0px;}
.accordion-body .sublisting span {width: 16px; height: 16px; border: 1px solid var(--secondary); display: inline-block; margin-right: 10px; margin-top: 5px;}
.accordion-body .sublisting i {font-size:20px; margin-right: 10px; margin-top: 5px;}

.sublisting a {
  display: flex;
  align-items: center;
  color: inherit; /* default link color remove */
}

.sublisting a:hover {
  text-decoration: underline; /* optional hover effect */
}

.sublisting .titles label {
  cursor: pointer; /* makes it feel clickable */
}

/* Profile Page CSS Start */
.profile-sec .left figure img {height: 300px; object-fit: cover; border-radius: var(--btn-border-radius);}
.profile-sec .right .wrapper {gap: 30px;}
/* Footer Section CSS Start */
footer {padding: 20px 0px; background: var(--secondary); text-align: center;}
footer p {margin-bottom: 0px; color: var(--white-color);}
footer a, footer a:hover,footer a:focus {color: var(--white-color); text-decoration: underline;}


/* Dashboard Page CSS Start */
.admin-header {background: var(--white-color); border-bottom: 1px solid rgba(17, 17, 17, 0.20);}
.header-profile img {width: 44px; height: 44px; border-radius: 100%; object-fit: cover;}
.header-profile .dropdown-toggle span img {width: 16px; height: 16px;}
.dropdown-toggle::after {content: inherit;}

/* Aside Menu CSS Start */
aside {width: 300px; height: 100vh; top: 65px; bottom: 0; left: 0; overflow-y: auto; z-index: 11111; background: var(--secondary); padding: 16px; position: fixed; transform: translateX(0); transition: transform 0.3s ease; }
aside.closed {transform: translateX(-100%);}
.hamburger {background: none; border: none; cursor: pointer; display: flex; flex-direction: column;
  justify-content: space-between; width: 45px; height: 32px;}
.hamburger span {display: block; height: 4px; width: 100%; margin: 4px 0; background: var(--primary); border-radius: 2px; transition: 0.35s;}
.header-dash-logo {width: 300px;}
.header-dash-logo img {width: 120px;}
aside ul li a {color: var(--white-color); padding: 20px 20px 20px 20px ; display: block; border-radius: 10px; }
aside ul li a:hover, aside ul li a:focus {background: var(--white-color);}
aside ul li a span {margin-right: 10px;}
main {margin-left: 300px; margin-top: 60px; transition: all 0.3s; padding: 50px 32px 100px 32px;}
main { margin-left: 300px; transition: margin-left 0.3s ease;}
main.fullwidth { margin-left: 0;}
.menu-profile {width: 100%; display: flex; align-items: center; justify-content: space-between;}
.actions {display: flex; gap: 16px;}
.actions a {font-size: 13px;}
.actions a i {margin-right: 3px; font-size: 10px;}
.table>:not(:first-child) {border-top: none;}
.table>thead {background: var(--secondary); color: var(--white-color);}
.table thead th, .table tr td {padding: 16px 20px;}
table.dataTable {padding-top: 20px;}

/* Dashboard Page CSS Start */
.dash-box .card-body {display: flex; flex-direction: column; gap: 50px;}
.dash-box .card-body .icon {width: 50px; height: 50px; background:#e6e6e6; border-radius: 100%; display: flex; align-items: center; justify-content: center; color: var(--primary);}
.dash-box .card-body h6 {text-transform: uppercase; opacity: 0.6;}
.add-form {gap: 30px;}